<template>
    <div class="common-body">
      <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/invoice/Entering/toSubmit' }"
          >发票管理
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{
            path: '/invoice/invoiceParameter'
          }"
          >发票台账
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span>查看</span>
          <span style="margin-left: 10px; color: #4a4a4a">{{
            $route.query.invoiceName
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- <div class="ccui-app-container-detail">
      <div class="ccui-app-container-detail-body"> -->
    <div
      :class="[
        contractState ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
    >
      <!--  主体左侧内容  -->
      <div :class="[!contractState ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!contractState" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          v-if="isTrue"
          :class="[
            !contractState
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <el-tab-pane label="基本信息" name="first">
            <detailBaseInfo
              ref="baseInfo"
              labelWidth="130px"
              :formList="baseFormList"
              :detail="detailList"
            />
            <!--  -->
          </el-tab-pane>
          <el-tab-pane label="发票清单" name="second">
            <!-- <invoiceList /> -->
            <div class="ccui-multifunctional-table-wrapper">
              <el-table
                align="center"
                ref="multipleTable"
                :data="tableBill"
                :isshow="true"
                border
                max-height="9999"
                class="ccui-multifunctional-table"
                :summary-method="getSummaries"
                lazy
                show-summary
              >
                <!-- <el-table-column
                  type="selection"
                  fixed="left"
                   width="55"
                ></el-table-column> -->
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  fixed="left"
                />
                <template v-for="(table, index) in billColumnData">
                  <el-table-column
                    :key="index"
                    :prop="table.prop"
                    :label="table.label"
                    :width="table.width"
                    :header-align="table.headerAlign"
                    :align="table.align"
                    show-overflow-tooltip
                  />
                </template>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="款项明细" name="three">
              <el-group-title class="ccui-group-wrapper d_jump">
                <template slot="groupTitle">
                  <div class="ccui-multifunctional-table-wrapper">
                    <el-table
                      :data="paymentDetail"
                      style="margin-bottom: 20px; width: 100%"
                      class="ccui-form-child-table"
                      border
                      lazy
                      ref="tableList"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        width="55"
                        fixed
                      />
                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="changeValue"
                        label="变动"
                        width="200"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.changeValue }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="paymentNameValue"
                        label="款项名称"
                        width="200"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.paymentNameValue }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="specialProjectValue"
                        label="专项项目"
                        width="150"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.specialProjectValue }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="receivablePayableNo"
                        label="应收应付编号"
                        width="200"
                        align="right"
                        header-align="left"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.receivablePayableNo }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="unWrittenOffOriginalAmount"
                        label="未核销金额（原币）"
                        width="200"
                        align="right"
                        header-align="left"
                      >
                        <template slot-scope="scope">
                          <span>{{
                            scope.row.unWrittenOffOriginalAmount
                          }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="originalCurrencyValue"
                        label="原币币种"
                        width="200"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.originalCurrencyValue }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="exchangeRate"
                        label="汇率"
                        width="150"
                        header-align="left"
                        align="right"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.exchangeRate }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="originalAmount"
                        label="金额（原币）"
                        width="150"
                        header-align="left"
                        align="right"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.originalAmount }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="standardAmount"
                        label="金额（本位币）"
                        width="150"
                        header-align="left"
                        align="right"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.standardAmount }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="dueDate"
                        label="到期日期"
                        width="150"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.dueDate }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="expectPayDate"
                        label="预计付款日期"
                        width="150"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.expectPayDate }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="contactNatureValue"
                        label="往来性质"
                        width="200"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.contactNatureValue }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="contactOrgName"
                        label="往来单位"
                        width="213"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.contactOrgName }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="contactUserName"
                        label="个人"
                        width="150"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.contactUserName }}</span>
                        </template>
                      </el-table-column>

                      <el-table-column
                        :show-overflow-tooltip="true"
                        prop="remark"
                        label="备注"
                        width="150"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.remark }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-group-title>
            </el-tab-pane>
          <el-tab-pane label="发票信息" name="four">
            <!-- <invoiceInfo /> -->
            <div class="ccui-multifunctional-table-wrapper">
              <el-table
                :data="tableInfo"
                style="margin-bottom: 20px; width: 100%"
                class="ccui-form-child-table"
                border
                :header-cell-class-name="must"
                :summary-method="getSummariesInfo"
                lazy
                show-summary
                ref="tableList"
              >
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column label="序号" type="index" width="55" fixed />
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="invoiceTypeName"
                  label="发票类型"
                  fixed
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.invoiceTypeName }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="invoiceNo"
                  label="发票号码"
                  min-width="130"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="invoiceCode"
                  label="发票代码"
                  min-width="130"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="ratePercent"
                  label="税率"
                  min-width="100"
                  header-align="left"
                  align="right"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="priceTaxTotal"
                  label="价税合计"
                  min-width="130"
                  header-align="left"
                  align="right"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="tax"
                  label="税额"
                  min-width="130"
                  header-align="left"
                  align="right"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="amountExcludeTax"
                  label="不含税金额"
                  width="130"
                  header-align="left"
                  align="right"
                >
                </el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="invoiceDate"
                  label="开票日期"
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    <span>{{ row.invoiceDate }}</span>
                  </template>
                </el-table-column>
    
                  <el-table-column
                      show-overflow-tooltip
                      prop="seller"
                      label="销售方名称"
                      min-width="150"
                  ></el-table-column>
    
                  <el-table-column
                      show-overflow-tooltip
                      prop="purchaser"
                      label="购买方名称"
                      min-width="150"
                  ></el-table-column>

                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="remake"
                  label="备注"
                  min-width="100"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="附件" name="five">
            <contractAnnex
              v-if="isTrue"
              ref="attachment"
              isTab
              v-model="fileList"
              state="detail"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      </div>
      <!--右边审批状态-->
      <!--  右边审批状态  -->
      <approval-read-record
        v-if="!contractState && isTrue"
        :approvalRecordData="approvalRecordData"
      />
    </div>

    <!--  底部导航栏及签名导出  -->
    <bottomGuide v-if="isTrue"
      busiType="108"
      approvalStatus="approvaled"
      exportMethod="get"
      methodGetPageType="exportInvoiceBasicInfo"
      :curPageId="myId"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
</div>
</template>

<script>
import { getInvoceBasicById } from "../api";
import { formatNumber } from "@/basa/utils";
import publicComponent from "@/basa/components/public";
import approvalReadRecord from "@/basa/components/public/approvalRecord";
export default {
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      activeName: "first",
      baseFormList: [
        { label: "填报单位", titleContent: "reportInOrgName" },
        { label: "发票单编号", titleContent: "invoiceCode" },
        { label: "发票单名称", titleContent: "invoiceName" },
        { label: "供应商", titleContent: "partyBName" },
        { label: "结算单编号", titleContent: "settlementCode" },
        { label: "结算单名称", titleContent: "settlementName" },
        { label: "合同编号", titleContent: "contractCode" },
        { label: "合同名称", titleContent: "contractName" },
        // { label: "合同签订单位", titleContent: "contractSignDeptName" },
        { label: "分类名称", titleContent: "categoryName" },
        { label: "币种", titleContent: "currency" },
        // { label: "汇率", titleContent: "exchangeRate" },
        // { label: "合同金额", titleContent: "matSource" },
        { label: "结算金额", titleContent: "settlementAmount" },
        { label: "已收票金额", titleContent: "totalInvoiceAmount" },
        { label: "本次收票金额", titleContent: "currentInvoiceAmount" },
        // { label: "物资来源", titleContent: "" },
        { label: "发票张数", titleContent: "invoiceNum" },
        { label: "编制人", titleContent: "compileUser" },
        { label: "编制日期", titleContent: "compileDate" },
        { label: "备注", titleContent: "remark", title: true }
      ],
      detailList: {},
      tableBill: [],
      tableInfo: [],
      billColumnData: [
        {
          prop: "storageCode",
          label: "入库单编号",
          width: "150"
        },
        {
          prop: "storageName",
          label: "入库单名称",
          width: "150"
        },
        {
          prop: "materialsCode",
          label: "设备物资编码",
          width: "110"
        },
        {
          prop: "materialsName",
          label: "设备物资名称",
          width: "200"
        },
        {
          prop: "materialsDescribe",
          label: "设备物资说明",
          width: "130"
        },
        {
          prop: "currentMeasuringUnit",
          label: "计量单位",
          width: "120"
        },
        {
          prop: "currentNum",
          label: "数量",
          width: "100",
          headerAlign: "left",
          align: "left"
        },
        {
          prop: "unitPriceWithoutTax",
          label: "不含税单价",
          width: "130",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "price",
          label: "含税单价",
          width: "130",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "rate",
          label: "税率",
          width: "100",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "amountExcludeTax",
          label: "不含税金额",
          width: "130",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "tax",
          label: "税额",
          width: "130",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "amount",
          label: "含税金额",
          width: "130",
          headerAlign: "left",
          align: "right"
        },
        {
          prop: "remark",
          label: "备注",
          width: "100"
        }
      ],
      fileList: [],
      isTrue: false,
      incomeStaus: "",
      myId: "",
      contractState: "",
      approving: "", // 审批状态
      approvingStatus: true, // 审批状态展示
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      approvalRecordData: []
    };
  },
  methods: {
    handleBack() {
      this.$router.push("/invoice/invoiceParameter/all-list");
      this.isTrue = false;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          ["currentNum", "amount", "amountExcludeTax", "tax"].includes(
            column.property
          )
        ) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                let num = Number(prev) + Number(curr);
                return num;
              } else {
                return Number(prev);
              }
            }, 0);
            //金额
            if (index == 11 || index == 12 || index == 13) {
              sums[index] = formatNumber(sums[index], 2);
            }
            //数量
            if (index == 7) {
              sums[index] = formatNumber(sums[index], 3);
            }
          }
        }
      });
      return sums;
    },
    getSummariesInfo(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          [
            "priceTaxTotal",
            "deductionRate",
            "amountExcludeTax",
            "tax",
            "deductionTax"
          ].includes(column.property)
        ) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                let num = Number(prev) + Number(curr);
                return num;
              } else {
                return Number(prev);
              }
            }, 0);
            if (
              index == 4 ||
              index == 5 ||
              index == 6 ||
              index == 7 ||
              index == 8
            ) {
              sums[index] = formatNumber(sums[index], 2);
            }
          }
        }
      });
      // 价税合计=本次收票金额（基本信息）
      sums.forEach((e, i) => {
        if (i == 5) {
          this.$bus.$emit("priceTaxTotalSum", e);
        }
      });
      return sums;
    },
    getList() {
      getInvoceBasicById({ id: this.$route.query.id }).then(res => {
        this.detailList = res.data.data.invoceBasic;
        this.businessCode = res.data.data.invoceBasic.invoiceCode;
        this.detailList.settlementAmount = Number(
          this.detailList.settlementAmount
        ).toFixed(2);
        this.detailList.totalInvoiceAmount = Number(
          this.detailList.totalInvoiceAmount
        ).toFixed(2);
        this.detailList.currentInvoiceAmount = Number(
          this.detailList.currentInvoiceAmount
        ).toFixed(2);
        this.detailList.compileDate = this.detailList.compileDate
          ? this.detailList.compileDate.substring(0, 10)
          : "";
        this.tableBill = res.data.data.invoceBill; //发票信息
        this.tableBill.forEach(e => {
          e.currentNum = formatNumber(e.currentNum, 3);
          e.unitPriceWithoutTax = Number(e.unitPriceWithoutTax).toFixed(2);
          e.price = Number(e.price).toFixed(2);
          e.amountExcludeTax = Number(e.amountExcludeTax).toFixed(2);
          e.tax = Number(e.tax).toFixed(2);
          e.amount = Number(e.amount).toFixed(2);
          e.rate = new this.$BigNumber(Number(e.rate)).multipliedBy(100) + "%";
          e.invoiceNum = formatNumber(Number(e.invoiceNum), 3);
        });
        this.paymentDetail = res.data.data.paymentDetail; // 款项明细
        this.paymentDetail.forEach(e => {
          e.exchangeRate = e.exchangeRate ? e.exchangeRate.toFixed(4) : "";
          e.originalAmount = e.originalAmount
            ? e.originalAmount.toFixed(2)
            : "";
          e.standardAmount = e.standardAmount
            ? e.standardAmount.toFixed(2)
            : "";
          e.dueDate = e.dueDate ? e.dueDate.substring(0, 10) : "";
          e.expectPayDate = e.expectPayDate
            ? e.expectPayDate.substring(0, 10)
            : "";
        });
        this.tableInfo = res.data.data.invoceInfo;
        this.tableInfo.forEach(e => {
          e.priceTaxTotal = Number(e.priceTaxTotal).toFixed(2);
          e.tax = Number(e.tax).toFixed(2);
          e.amountExcludeTax = Number(e.amountExcludeTax).toFixed(2);
          if (e.invoiceDate) {
            e.invoiceDate = e.invoiceDate.substring(0, 10);
          }
        });
        this.fileList = res.data.data.files;
        this.fileList.forEach(item => {
          item.createTime = item.uploadTime;
        });
        var fileIds = [];
        for (let i = 0; i < this.fileList.length; i++) {
          fileIds.push(this.fileList[i].fileInfoId);
        }

        this.approvalRecordData = res.data.data.approvalRecords;
        this.approvalRecordData.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        this.isTrue = true;
        this.approving = this.approvingType[this.detailList.enterApproveStatus];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
        this.isTrue = true;
      });
    },
    must(obj) {
      if (
        obj.columnIndex == 0 ||
        obj.columnIndex == 1 ||
        obj.columnIndex == 10 ||
        obj.columnIndex == 11
      ) {
        return;
      } else {
        return "must";
      }
    }
  },
  activated() {
    console.log("this.$router.query", this.$route.query);
    this.incomeStaus = this.$route.query.enterStatus;
    this.myId = this.$route.query.id;
  },
  mounted() {
    console.log(this.$route.query.id);
    this.getList();
  },
  components: {
    detailBaseInfo: publicComponent.detailBaseInfo,
    contractAnnex: publicComponent.uploadInfo,
    bottomGuide: publicComponent.bottomGuide,
    approvalReadRecord
  }
};
</script>

<style lang="scss" scoped>
// /deep/
//   .ccui-multifunctional-table-wrapper
//   .el-table
//   .el-table__footer-wrapper
//   tbody
//   td {
//   font-size: 13px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 600;
//   color: #0089ef;
// }
// // /deep/ .el-table th.must > .cell:before {
// //   content: "* ";
// //   color: #ff1818;
// // }
// /deep/ .ccui-multifunctional-table-wrapper .el-table__header-wrapper th {
//   border-right: 1px solid #edf2fc;
// }
// /deep/ .ccui-multifunctional-table-wrapper .el-table td {
//   border-right: 1px solid #edf2fc;
// }
.commonClass {
  margin-top: 5px;
}
</style>
